<template>
    <div>
        <table>
            <tHead>
                <tr>
                    <td>名字</td>
                    <td>数量</td>
                </tr>
            </tHead>
            <tbody>
                <tr v-for="(item) in goodList" :key="item.id">
                    <td>{{ item.name }}</td>
                    <td>{{ item.num }}</td>
                </tr>
            </tbody>
        </table>
        <p>礼物总数: {{totalCount}}个</p>
    </div>
</template>

<script setup>
    import { ref,computed } from 'vue'
    const goodList = ref([
        {id:1,name:'篮球',num:1},
        {id:2,name:'足球',num:3},
        {id:3,name:'书籍',num:2}
    ])
    const totalCount = computed(() => {
        return goodList.value.reduce((prev,item) => prev + item.num,0)
    })
</script>

<style scoped>

</style>